<script setup lang="ts">
  import { ArrowRight } from '@element-plus/icons-vue'
  import { useNetworkInviteCodeSetService } from '../services'
  import { ElMessage } from 'element-plus'
  import SendInviteCode from './SendInviteCode.vue'
  import { ref } from 'vue'
  import { NetworkInviteCodeSet } from '../types'
  import InviteRecord from './InviteRecord.vue'
  import HLink from '@/components/common/link/HLink.vue'

  const emits = defineEmits<{
    (e: 'update', value: NetworkInviteCodeSet): void
  }>()

  const {
    networkInviteCodeSet,
    generateInviteCodeLoading,
    getNetworkInviteCodeSetLoading,
    generateInviteCodeFn,
    getNetworkInviteCodeSetFn,
  } = useNetworkInviteCodeSetService

  // 复制邀请码事件
  const onCopy = () => {
    if (networkInviteCodeSet.value) {
      navigator.clipboard.writeText(networkInviteCodeSet.value.inviteCode)
      ElMessage({
        type: 'success',
        message: '复制成功',
        duration: 5000,
        plain: true,
        showClose: true,
      })
    }
  }

  // 生成/重新生成邀请码
  const onCreateGenerateInviteCode = () => {
    generateInviteCodeFn()
    emits('update', networkInviteCodeSet.value)
  }

  // 发送验证码弹窗显示状态
  const sendInviteCodeModalVisible = ref(false)

  // 邀请记录显示状态
  const inviteRecordModalVisible = ref(false)

  defineExpose({
    getNetworkInviteCodeSet: getNetworkInviteCodeSetFn,
  })
</script>

<template>
  <div v-loading="getNetworkInviteCodeSetLoading" class="invite_code_form">
    <template v-if="networkInviteCodeSet">
      <el-form ref="inviteCodeForm" :model="networkInviteCodeSet">
        <div class="form">
          <!--邀请码有效期-->
          <el-form-item class="form_item">
            <template #label>
              <div class="form_item_label">
                <span class="name">邀请码有效期</span>
                <span class="tips">数字、短信邀请码有效天数</span>
              </div>
            </template>
            <div class="form_item_content">
              <el-input
                v-model.trim="networkInviteCodeSet.expirtTime"
                style="width: 12vw"
                maxlength="4"
                placeholder="请输入有效天数"
                @input="$emit('update', networkInviteCodeSet)"
              >
                <template #append><span style="font-size: 12px">天</span> </template>
              </el-input>
            </div>
          </el-form-item>

          <!--允许其他成员邀请-->
          <el-form-item class="form_item">
            <template #label>
              <div class="form_item_label">
                <span class="name">允许其他成员邀请</span>
                <span class="tips">开启后普通成员也可邀请</span>
              </div>
            </template>
            <div class="form_item_content">
              <div style="display: flex; align-items: center; gap: 5px">
                <el-switch
                  v-model="networkInviteCodeSet.enableNotSuperManagerInvite"
                  @change="$emit('update', networkInviteCodeSet)"
                />
                <span v-if="networkInviteCodeSet.enableNotSuperManagerInvite">开启</span>
                <span v-else>关闭</span>
              </div>
            </div>
          </el-form-item>

          <!--邀请审核-->
          <el-form-item class="form_item">
            <template #label>
              <div class="form_item_label">
                <span class="name">邀请审核</span>
                <span class="tips">若关闭则无需审核直接入驻企业</span>
              </div>
            </template>
            <div class="form_item_content">
              <div style="display: flex; align-items: center; gap: 5px">
                <el-switch
                  v-model="networkInviteCodeSet.enableInviteCheck"
                  @change="$emit('update', networkInviteCodeSet)"
                />
                <span v-if="networkInviteCodeSet.enableInviteCheck">开启</span>
                <span v-else>关闭</span>
              </div>
            </div>
          </el-form-item>

          <!--邀请方式-->
          <!-- <el-form-item class="form_item">
            <template #label>
              <div class="form_item_label">
                <span class="name">邀请方式</span>
                <span class="tips">可通过输入邀请码或短信邀请链接入驻企业</span>
              </div>
            </template>
            <div class="form_item_content">
              <el-radio-group
                @change="$emit('update', networkInviteCodeSet)"
                v-model="networkInviteCodeSet.inviteType"
                class="el-group"
              >
                <el-radio :value="1">
                  <span class="bg_text">邀请码</span>
                </el-radio>
                <el-radio :value="2">
                  <span class="bg_text">短信邀请</span>
                </el-radio>
              </el-radio-group>
            </div>
          </el-form-item> -->

          <!--邀请码-->
          <el-form-item class="form_item">
            <template #label>
              <div class="form_item_label">
                <span class="name">邀请码</span>
                <span class="tips">网点入驻企业时输入的邀请码</span>
              </div>
            </template>
            <div class="form_item_content" style="display: flex; align-items: center">
              <div class="invite_code">
                <span>{{ networkInviteCodeSet.inviteCode }}</span>
                <HLink
                  v-if="networkInviteCodeSet.inviteCode"
                  v-loading="generateInviteCodeLoading"
                  @click="onCreateGenerateInviteCode"
                  >重新生成</HLink
                >
                <HLink
                  v-else
                  v-loading="generateInviteCodeLoading"
                  @click="onCreateGenerateInviteCode"
                  >生成</HLink
                >
              </div>
              <HLink @click="onCopy">复制</HLink>
            </div>
          </el-form-item>

          <!--发送短信邀请-->
          <el-form-item class="form_item">
            <template #label>
              <div class="form_item_label">
                <div class="name">
                  <span>发送短信邀请</span>
                  <HLink @click="inviteRecordModalVisible = true">
                    <span style="margin-right: 2px">邀请记录</span>
                    <el-icon>
                      <ArrowRight />
                    </el-icon>
                  </HLink>
                </div>
                <span class="tips">发送短信链接网点点击链接入驻企业</span>
              </div>
            </template>
            <div class="form_item_content">
              <HLink @click="sendInviteCodeModalVisible = true">
                <div style="display: flex; align-items: center; gap: 5px">
                  <i class="fa fa-send-o" aria-hidden="true" style="font-size: 14px"></i>
                  <span style="font-size: 14px">发送短信</span>
                </div>
              </HLink>
            </div>
          </el-form-item>
        </div>
      </el-form>

      <SendInviteCode v-model="sendInviteCodeModalVisible" />
      <InviteRecord v-model="inviteRecordModalVisible" />
    </template>
  </div>
</template>

<style scoped lang="scss">
  @import '../../../index.scss';
</style>
